<template>
	<view class="page">
		<view class="section section_1 flex">
			<view class="home-title-left flex-2">
				{{accountSets.companyName}}
			</view>
			<view class="flex-1 tr">{{voucherDate}}</view>
		</view>
		<view class="section flex">
			<view class="flex-1 tc" @click="openLike('/pages/balance/balance')">
				<image class="item-icon" src="/static/home/balance.png" mode="aspectFill">
				</image>
				<view class=" cr-base text-size-sm">科目余额</view>
			</view>
			<view class="flex-1 tc" @click="openLike('/pages/subject/subject')">
				<image class="item-icon" src="/static/home/detail.png" mode="aspectFill">
				</image>
				<view class=" cr-base text-size-sm">明细账</view>
			</view>
			<view class="flex-1 tc" @click="openLike('/pages/report-items/report-items')">
				<image class="item-icon" src="/static/home/debt.png" mode="aspectFill">
				</image>
				<view class=" cr-base text-size-sm">资产负债表</view>
			</view>
			<view class="flex-1 tc" @click="openLike('/pages/incomestatement/incomestatement')">
				<image class="item-icon" src="/static/home/profit.png" mode="aspectFill">
				</image>
				<view class=" cr-base text-size-sm">利润表</view>
			</view>
		</view>

		<view class="section">
			<view class="home-title" @click="openLike('/pages/cosh-detail/cosh-detail')">
				<text class="home-title-left cr-base">资金余额</text>
				<uni-icons type="right" size="14"></uni-icons>
			</view>
			<view class="charts-box" v-if="isCosh">
				<qiun-data-charts type="ring" :opts="coshOpts" :chartData="coshChartData" />
			</view>
			<view v-else>
				<text>本期暂无数据！</text>
			</view>
		</view>
		<view class="section">
			<view class="home-title" @click="openLike('/pages/accounts-payable/accounts-payable')">
				<text class="home-title-left cr-base">应收应付</text>
				<uni-icons type="right" size="14"></uni-icons>
			</view>
			<view class=" flex padding">
				<view class="flex-1 tc br-r-f5">
					<view class="cr-black text-size-xl padding-bottom-sm">{{numFilter(cope["1122"])}}</view>
					<view class="cr-base">应收账款</view>
				</view>
				<view class="flex-1 tc">
					<view class="cr-black text-size-xl padding-bottom-sm">{{numFilter(cope["2202"])}}</view>
					<view class="cr-base">应付账款</view>
				</view>
			</view>
		</view>

		<view class="section">
			<view class="home-title" @click="openLike('/pages/incomestatement/incomestatement')">
				<text class="home-title-left cr-base">利润趋势</text>
				<uni-icons type="right" size="14"></uni-icons>
			</view>
			<view class="charts-box">
				<!--				<qiun-data-charts type="line" :opts="profitOpts" :chartData="profitChartData"-->
				<!--					tooltipFormat="hometooltip" />-->
				<template v-if="profitChartData.length>0">
					<view class="flex justify-between margin-top-sm">
						<view class="flex-1">月份</view>
						<view class="flex-2">本年利润</view>
						<view class="flex-2">主营业务收入</view>
					</view>
					<view v-for="(item,index) in profitChartData" class="flex justify-between margin-top-sm">
						<view class="flex-1">{{item.m}}月</view>
						<view class="flex-2">{{item.lr}}</view>
						<view class="flex-2">{{item.sr}}</view>
					</view>
				</template>
				<view v-else class="text-c">
					<text>本期暂无数据！</text>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="home-title" @click="openLike('/pages/cost-detail/cost-detail')">
				<text class="home-title-left cr-base">费用趋势</text>
				<uni-icons type="right" size="14"></uni-icons>
			</view>
			<view class="charts-box">
				<template v-if="isCostChart">
					<qiun-data-charts type="ring" :opts="costOpts" :chartData="costChartData"
						tooltipFormat="hometooltip" />
				</template>
				<view v-else class="text-c">
					<text>本期暂无数据！</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import revenueProfit from '../../config/revenueProfit';
	import common from '../../js/api/common';
	import home from '../../js/api/home';
	import Util from '@/js/util';
	import store from "../../stores";

	const app = getApp();
	export default {
		data() {
			return {
				profitData: {},
				show: false,
				accountSetsId: '',
				accountSets: {},
				voucherDate: '',
				cope: {
					"1122": 0,
					"2202": 0
				},
				costChartData: {},
				isCostChart: false,
				costOpts: {
					rotate: false,
					rotateLock: false,
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25,
					},
					title: {
						name: "费用金额",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 15,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 10,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
				profitChartData: [],
				coshChartData: {},
				isCosh: false,
				coshOpts: {
					rotate: false,
					rotateLock: false,
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25,
					},
					title: {
						name: "资金余额",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 15,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 10,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				}
			}
		},
		onShow() {
			this.init();
			this.loadCash();
			this.loadCope();
			this.loadCost();
			this.revenueProfit();
		},
		methods: {
			openLike(url) {
				uni.navigateTo({
					url: url
				})
			},
			numFilter(value) {
				let realVal = parseFloat(value ? value : 0).toFixed(2)
				return realVal
			},
			init() {
				common.init().then((res) => {
					store.commit("setCustom", res.user)
					uni.setStorageSync(app.globalData.data.cache_config_info_key, res.user);
					uni.setStorageSync(app.globalData.data.cache_account_sets, res.user.accountSets);
					uni.setStorageSync(app.globalData.data.cache_currency_id, Object.values(res.currency).find(
						val => val.localCurrency).id);
					let checkoutList = this.toList(res.user.checkoutList)
					uni.setStorageSync(app.globalData.data.cache_checkout_list, checkoutList)
					this.voucherDate = checkoutList[0]
					this.accountSetsId = res.user.accountSets.id;
					this.accountSets = res.user.accountSets;
				})
			},

			toList(list) {
				const checkList = []
				list.forEach(item => {
					checkList.push(item.checkYear + '年' + item.checkMonth + '期')
				})
				return checkList
			},
			loadCash() {
				home.cash().then((res) => {
					if (res.length > 0) {
						this.isCosh = true
						let model = {
							series: [{
								data: res
							}]
						};
						// this.coshOpts.subtitle.name=1000
						this.coshChartData = JSON.parse(JSON.stringify(model));
					}
				})
			},
			revenueProfit() {
				home.revenueProfit().then((res) => {
					if (res) {
						const keyList = Object.keys(res);
						this.profitData = keyList
						if (keyList.length <= 0) {
							return;
						}
						const dataValues = []
						let key0 = keyList[0]
						let key1 = keyList[1]
						for (let m = 1; m <= 12; m++) {
							let isTrue = false
							let rProfit = {}
							if (res[key0][m]) {
								isTrue = true
								rProfit.lr = res[key0][m]
							}
							if (res[key1][m]) {
								isTrue = true
								rProfit.sr = res[key1][m]
							}
							if (isTrue) {
								rProfit.m = m
								dataValues.push(rProfit)
							}
						}
						this.profitChartData = dataValues;
					}
				})

			},
			loadCope() {
				home.cope().then((res) => {
					this.cope = res
				})
			},
			loadCost() {
				home.cost().then((res) => {
					if (res.length > 0) {
						this.isCostChart = true
						let model = {
							series: [{
								data: res || []
							}]
						};
						this.costChartData = JSON.parse(JSON.stringify(model));
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 100%;
		padding-top: 6px;
		padding-bottom: 10px;
		max-height: 280px;
	}

	.home-title {
		display: flex;
		align-items: center;
		justify-content: space-between
	}

	.home-title-left {
		font-weight: bold;
	}

	.page {
		background-color: rgba(246, 247, 248, 1);
		position: relative;
		overflow: hidden;
	}

	.section {
		background-color: rgba(255, 255, 255, 1);
		padding: 10rpx 20rpx;
		margin-bottom: 30rpx;
	}

	.section_1 {
		height: 46rpx;
	}

	.item-icon {
		width: 108rpx;
		height: 108rpx;
	}


	.flex-col {
		display: flex;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.justify-start {
		display: flex;
		justify-content: flex-start;
	}

	.justify-center {
		display: flex;
		justify-content: center;
	}

	.justify-end {
		display: flex;
		justify-content: flex-end;
	}

	.justify-evenly {
		display: flex;
		justify-content: space-evenly;
	}

	.justify-around {
		display: flex;
		justify-content: space-around;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}
</style>